import { Button, Form, Modal, Table } from 'antd'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import '../../less/index.less'
import { previewModalStyle } from '../../constant/constant-style'
import { TwsReactMarkdownPreview } from 'tws-antd'
import MultipleChoice from '../assignemnt/preview-quiz/multiple-choice'
import ReactDragListView from 'react-drag-listview'
import * as action from '../../actions/assignment'
import BlankQuiz from '../assignemnt/preview-quiz/blank-quiz'
import SingleChoice from '../assignemnt/preview-quiz/single-choice'
import CodingQuiz from '../assignemnt/preview-quiz/coding-quiz'
import LogicQuiz from '../assignemnt/preview-quiz/logic-quiz'
import { quizTypes } from '../../constant/constant-data'
import getQuizType from '../../constant/quiz-type-app-address'
import { FormattedMessage } from 'react-intl'
import { convertContent } from '../../constant/lang-util'
import SurveyQuiz from './preview-quiz/survey-quiz'

const MAP_COMPONENT = {
  'MULTIPLE_CHOICE': MultipleChoice,
  'BASIC_BLANK_QUIZ': BlankQuiz,
  'SINGLE_CHOICE': SingleChoice,
  'SURVEY_QUIZ': SurveyQuiz,
  'HOMEWORK_QUIZ': CodingQuiz,
  'LOGIC_QUIZ': LogicQuiz
}
const SIMPLE_CODING_QUIZ = 'SIMPLE_CODING_QUIZ'

class QuizzesModel extends Component {
  constructor () {
    super()
    this.state = {
      isShowOption: true
    }
  }
  toEditPage (quiz) {
    const addressSuffix = getQuizType(quiz.type || this.props.assignment.type)
    const address = `/learn${addressSuffix}`
    window.open(address + quiz.id + '/editor')
  }
  isShowOption () {
    this.setState({isShowOption: !this.state.isShowOption})
  }
  render () {
    const {visible, closeModal, quizzes, taskId, assignment} = this.props
    const quizType = quizTypes.find(item => item.type === assignment.type) || {text: ''}
    let RenderComponent = MAP_COMPONENT[assignment.type]

    const columns = [{
      title: <FormattedMessage id='详细信息' />,
      width: '90%',
      dataIndex: 'type',
      render: (text, record, index) => {
        if (assignment.type === 'BASIC_QUIZ') {
          RenderComponent = MAP_COMPONENT[record.type]
        }
        return <Form key={index}>
          {assignment.type !== '逻辑题'
              ? <Form.Item label={index + 1 + convertContent('描述')}>
                <TwsReactMarkdownPreview source={this.state.isShowOption ? record.description : record.description.substring(0, 10) + '...'} />
              {assignment.type === SIMPLE_CODING_QUIZ ?
                <h4><FormattedMessage id='仓库地址' />：
                  <a target='_blank' href={record ? record.templateRepository : ''}>{record ? record.templateRepository : ''}</a>
                </h4>  : ''}
              </Form.Item> : ''}

          {this.state.isShowOption
            ? RenderComponent
              ? <RenderComponent
                quiz={record}
                FormItem={Form.Item}
                formItemLayout={previewModalStyle} />
              : ''
            : ''
          }
        </Form>
      }
    }, {
      title: <FormattedMessage id='操作' />,
      dataIndex: 'id',
      width: '10%',
      render: (text, record) => {
        return <span>
          <a onClick={this.toEditPage.bind(this, record)}><FormattedMessage id='修改' /></a>
          {this.state.isShowOption
            ? ''
            : <span>
              <span className='ant-divider' />
              <span className='margin-l-1'>
                <a id='assignment' className='drag-handle'><FormattedMessage id='拖拽排序' /></a>
              </span>
            </span>}
        </span>
      }
    }]
    const that = this
    const drag = {
      onDragEnd (fromIndex, toIndex) {
        const data = quizzes
        const item = data.splice(fromIndex, 1)[0]
        data.splice(toIndex, 0, item)
        that.props.dragSortQuiz(data, taskId, assignment.id)
      },
      handleSelector: '#assignment'
    }
    return (
      <Modal
        title={convertContent('预览') + `${quizType.text}`}
        visible={visible}
        width='90%'
        footer={null}
        onCancel={closeModal}
        >
        <Button className='preview-button' type='primary' onClick={this.isShowOption.bind(this)}>{this.state.isShowOption ? <FormattedMessage id='调整顺序' /> : <FormattedMessage id='返回预览' />}</Button>
        <ReactDragListView {...drag}>
          <Table className='programList-table' bordered dataSource={quizzes} columns={columns}
            rowKey={record => record.id} pagination={false}
          />
        </ReactDragListView>
      </Modal>
    )
  }
}

const mapStateToProps = ({quizzes, settings}) => ({
  quizzes,
  settings
})
const mapDispatchToProps = dispatch => ({
  dragSortQuiz: (data, taskId, assignmentId) => dispatch(action.dragSortQuiz(data, taskId, assignmentId))
})

export default connect(mapStateToProps, mapDispatchToProps)(QuizzesModel)
